<template>
  <div class="users">
    <div class="title">
      用户信息
    </div>
    <!--<div class="titleSmall">-->
      <!--预约统计-->
    <!--</div>-->
    <el-container>
      <el-form>
        <el-form-item label="城市：">
          <el-select v-model="value" placeholder="全部" @change="cityChange">
            <el-option
              v-for="item in optionsCity"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期：">
          <el-select v-model="dateValue" placeholder="全部" @change="dateChange">
            <el-option
              v-for="item in dateOption"
              :key="item.showTime"
              :label="item.showTime"
              :value="item.activeTime">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input  placeholder="请输入内容" class="tel" v-model="mobiles"></el-input>
        </el-form-item>
        <el-form-item class="btnForm">
          <el-button type="primary" class="btn" @click="searchMobile()">搜索</el-button>
        </el-form-item>

      </el-form>




    </el-container>


    <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
    prop="id"
    label="用户ID"
    width="120"
    >
    </el-table-column>
    <el-table-column
    prop="address"
    label="地址"
    >
    </el-table-column>
      <el-table-column
        prop="city"
        label="城市"
      >
        <!--<template slot-scope="{row}">-->
        <!--{{row.name | nameFilter}}-->
        <!--</template>-->
      </el-table-column>
      <el-table-column
        prop="reservationDate"
        label="预约场次"
      >
        <template slot-scope="{row}">
          {{row.reservationDate|reserveFilter}}
        </template>
    </el-table-column>
      <el-table-column
        prop="type"
        label="用户类型"
      >
        <template slot-scope="{row}">
          {{row.type|typeFilter}}
        </template>
      </el-table-column>
    <el-table-column
    prop="name"
    label="名字"
    >
    <!--<template slot-scope="{sampling}">-->
    <!--蔚蓝男士香精试用装1.5ml-->
    <!--</template>-->
    </el-table-column>
      <el-table-column
        prop="mobile"
        label="手机"
      >
      </el-table-column>
    <el-table-column
    prop="openId"
    label="Openid"
    width="160">
    </el-table-column>
    <el-table-column
    prop="shortLink"
    label="URL"
    width="120"
    >
    <!--<template slot-scope="{abc}">-->
    <!--037175-->
    <!--</template>-->
    </el-table-column>
    <el-table-column
    prop="confirmTimes"
    label="到场时间"
    width="200">
      <template slot-scope="{row}">
        {{row.confirmTimes|confireTime}}
      </template>
    </el-table-column>

    <el-table-column
    label="操作"
    width="200px"
    >
      <template slot-scope="scope">
        <el-button type="primary" class="sendAgain" @click="sendMsg(scope.$index, scope.row)">重发短信</el-button>
        <el-button type="success" class="del" @click="deleteRow(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>

    </el-table>

    <div class="block">
      <el-pagination
        @prev-click="pre"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage1"
        :page-size="15"
        layout="total, prev, pager, next"
        :total="rowCount">
      </el-pagination>
    </div>
  </div>


</template>

<script>
  import axios from 'axios'
  import {ERROR,Citys} from '@/js/utils.js'
  import {CONST} from "../../js/utils";
var mobileFind = '';
var pid = 0;
  export default {
    data() {
      return {
        mobiles: '',
        currentPage1: 1,
        rowCount: 0,
        tableData: [],
        tableData2: [],
        optionsCity: ['全部'],
        dateOption: [{'activeTime':'全部',showTime:'全部'}],
        value: '全部',
        dateValue: '全部',
        value5: [],
        value11: []
      }
    },
    filters: {
      reserveFilter(value) {
        let mons = value.substr(0,2)+'月';
        let days = value.substr(2,2)+'日';
        let reserveTime = mons+days
        return  reserveTime
      },
      confireTime(value) {
        if(!value){
          return '';
        }
        let lastTime = value[value.length-1];
        return lastTime
      },
      typeFilter(value){
        if(value==0){
          return '普通用户'
        }else{
          return 'VIP'
        }
      }
    },
    methods: {
      searchMobile() {
        mobileFind = this.mobiles;
        if(!(/^1[1345789]\d{9}$/.test(mobileFind))){
          this.$message(
            {
              message: '格式有误',
              type: 'error'
            }
          )
          return
        }
        this.getTableDate();
      },
      deleteRow(index, row) {
        let telphone = row.id;
        let username = row.name;
        let gid = row.id;
        var delObj = {
          pid: pid,
          id: telphone
        }
        let msgTemp = '是否删除用户'+'\n'+'用户名: '+ username
        if(confirm(msgTemp)){
          axios.post(CONST.URL.CLEAR,delObj)
            .then((result)=>{
              if (result.data.code === '00000'){
                this.$message({
                  message: '删除成功',
                  type: 'success'
                })
                this.getTableDate();
              }else{
                this.$message({
                  message: '删除失败',
                  type: 'danger'
                })
              }
            })
        }
      },
      sendMsg(index, row) {             //发短信
        let userId = row.id;
        if(userId==''){
          this.$message('短信发送失败')
        }else{
          let mobileNum = row.id;
          let mobileNum2 = row.mobile;
          let msgTemp = '是否重新发送短信'+'\n'+'手机号: '+ mobileNum2
          let sendObj ={
            id: mobileNum,
            pid: pid,
          };
          if(confirm(msgTemp)){
            axios.post(CONST.URL.RESEND_SMS,sendObj)
              .then((result)=>{
                if (result.data.code === '00000'){
                  this.$message({
                    message: '发送成功',
                    type: 'success'
                  })
                }else{
                  this.$message.error(ERROR[result.data.code])
                }
              })
          }

        }
      },
      dateChange() {
        this.getTableDate();
      },
      cityChange(val) {
        this.dateValue = '全部'          //城市改变时，日期变成全部

        if(this.value=='全部'|| this.value==''){         //城市变成全部时
          this.dateOption = [{'activeTime':'全部',showTime:'全部'}]
        }else{
          this.dateOption = [{'activeTime':'全部',showTime:'全部'}]

          this.getDate();

        }
        this.getTableDate();



      },
      getDate(){
        var jsons = {pid:pid,city:Citys.City2[this.value]}
        axios.post(CONST.URL.FIND_ACL,jsons)
          .then((result)=>{
            if(result.data.code=='00000'){
              var times = result.data.data[0].activeTime;
              for(var i=0;i<times.length;i++) {
                var show1 = times[i].substr(0, 2) + '月';
                var show2 = times[i].substr(2, 2) + '日';
                var show = show1 + show2;
                var newObj = {
                  activeTime: times[i],
                  showTime:show
                }
                this.dateOption.push(newObj);



              }


            }

          })
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.getTableDate(val)
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.getTableDate(val)
      },
      pre(val){
        this.getTableDate(val)
      },

      getTableDate(pageNo) {
        if(!pageNo){
          pageNo ='1'
        }
       var modelCity = '';
       var modelDate = '';
        if(this.value =='全部'||this.value==''){
          modelCity = ''
        }else{
          modelCity = Citys.City2[this.value]
        }
        if(this.dateValue =='全部'|| this.dateValue==''){
          modelDate = '';
        }else{
          modelDate = this.dateValue;
        }



        let findAllObj = {
            mobile: mobileFind,
            pid: pid,
            city: modelCity,
            reservationDate: modelDate,           //预约日期
            pages: {
              pageNo:pageNo,
              pageSize: '15',
            }

        }
        axios.post(CONST.URL.FIND_BC,findAllObj)
          .then((result)=>{

            this.tableData = result.data.data.datas;
            this.rowCount = result.data.data.rowCount
          })
      },
      getCity() {
        var jsons = {pid:pid}
        axios.post(CONST.URL.FIND_ACL,jsons)
          .then((result)=>{
          if(result.data.code=='00000'){
            var citys = result.data.data

            citys.forEach((item)=>{
              this.optionsCity.push(Citys.City1[item.city])
            })
          }

          })
      }

    },
    mounted() {
      pid = localStorage.getItem('pid')
      this.getCity();
      this.getTableDate();




    }
  }
</script>
<style>
  .users .title{
    text-align: left;
    font-size: 22px;
    color:#697882;
    margin-bottom: 20px;
    margin-top: 20px;
  }
  .date{
    margin-left:30px;
  }
  .tel{
    margin-left: 30px;
  }
  .el-button--primary{
    border:none;
  }
  .el-form-item{
    float: left;
    width: 300px;
    box-sizing: border-box;
  }
  .btnForm{
    width:68px;
  }
  .btn{
    /*background-color: #c49f47;*/
    margin-left: 60px;
    background-color: #1fbba6;

  }
  .btn:hover,.btn:focus,.btn:visited,.btn:active{
    background-color: #4cc9b8;
  }
  .del:hover,.del:focus,.del:visited,.del:active{
    background-color: #1fbba6;
  }
  .del{
    background-color: #1fbba6;
  }
  .el-table td, .el-table th.is-leaf{
    text-align: center;
  }
  .el-button--primary{

  }
  .block{
    text-align: left;
  }
</style>
